<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./image/logo.ico" type="image/x-icon">
    <title>搜狗输入法-首页</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/jq.js"></script>
</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <div class="headerWrap">
            <!-- 头部logo -->
            <div class="header_logo"></div>
            <!-- 头部菜单栏 -->
            <div class="header_menu">
                <div class="header_menu_product">
                    <span>产品</span>
                    <div class="header_menu_list header_menu_product_list">
                        <ul>
                            <li>
                                <a href="#">输入法Win版</a>
                            </li>
                            <li>
                                <a href="#">输入法手机版</a>
                            </li>
                            <li>
                                <a href="#">输入法Mac版</a>
                            </li>
                            <li>
                                <a href="#">输入法Linux版</a>
                            </li>
                            <li>
                                <a href="#">五笔输入法</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="header_menu_OpenPlatform">
                    <span>开放平台</span>
                    <div class="header_menu_list header_menu_OpenPlatform_list">
                        <ul>
                            <li>
                                <a href="#">
                                    皮肤表情开放平台
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    输入法开放平台
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="header_menu_contact">
                    <a href="#">联系合作</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 横幅 -->
    <div class="banner">
        <!-- 横幅遮罩 -->
        <div class="banner_wrap">
            <!-- 横幅轮播图 -->
            <div class="banner_swiper">
                <!-- 横幅轮播图遮罩 -->
                <div class="banner_swiper_wrap">
                    <div class="banner_swiper_item">
                        5
                    </div>
                    <div class="banner_swiper_item">
                        1
                    </div>
                    <div class="banner_swiper_item">
                        2
                    </div>
                    <div class="banner_swiper_item">
                        3
                    </div>
                    <div class="banner_swiper_item">
                        4
                    </div>
                    <div class="banner_swiper_item">
                        5
                    </div>
                    <div class="banner_swiper_item">
                        1
                    </div>
                </div>
                <!-- 横幅轮播图按钮 -->
                <div class="banner_swiper_button">
                    <div class="banner_swiper_button_item banner_swiper_button_item_active"></div>
                    <div class="banner_swiper_button_item"></div>
                    <div class="banner_swiper_button_item"></div>
                    <div class="banner_swiper_button_item"></div>
                    <div class="banner_swiper_button_item"></div>
                </div>
            </div>
        </div>
    </div>
    <script>
        //判断是否进入头部产品列表，默认不进入
        let in_product_list = false;
        //鼠标悬停在头部产品目录
        $('.header_menu_product span').hover(
            () => {
                $('.header_menu_product_list').css('display', 'block');
                in_product_list = true;
            },
            () => {
                in_product_list = false;
                //延迟0.2s之后判断
                setTimeout(() => {
                    if (!in_product_list) {
                        $('.header_menu_product_list').css('display', 'none');
                    }
                }, 200);
            }
        );
        //鼠标悬停在头部产品列表
        $('.header_menu_product_list').hover(
            () => {
                $('.header_menu_product_list').css('display', 'block');
                in_product_list = true;
            },
            () => {
                $('.header_menu_product_list').css('display', 'none');
            }
        );
        //判断是否进入开放平台列表，默认不进入
        let in_OpenPlatform_list = false;
        //鼠标悬停在头部开放平台目录
        $('.header_menu_OpenPlatform span').hover(
            () => {
                $('.header_menu_OpenPlatform_list').css('display', 'block');
                in_OpenPlatform_list = true;
            },
            () => {
                in_OpenPlatform_list = false;
                //延迟0.2s之后判断
                setTimeout(() => {
                    if (!in_OpenPlatform_list) {
                        $('.header_menu_OpenPlatform_list').css('display', 'none');
                    }
                }, 200);
            }
        );
        //鼠标悬停在头部开放平台列表
        $('.header_menu_OpenPlatform_list').hover(
            () => {
                $('.header_menu_OpenPlatform_list').css('display', 'block');
                in_OpenPlatform_list = true;
            },
            () => {
                $('.header_menu_OpenPlatform_list').css('display', 'none');
            }
        );
        //设置横幅轮播图索引值
        let bannerIndex = 0;
        //设置横幅轮播图定时器名
        let bannerTimer;
        //定时器函数
        function setBannerTimer() {
            bannerTimer = setInterval(() => {
                bannerIndex++;
                bannerIndexChange();
            }, 3000);
        };
        //鼠标点击横幅按钮
        $('.banner_swiper_button_item').click(function () {
            //清除定时器
            clearInterval(bannerTimer);
            //获取当前按钮索引值
            var i = $(this).index();
            //将获取的按钮索引值赋给横幅轮播图索引值
            bannerIndex = i;
            //调用索引值改变函数
            bannerIndexChange();
            //恢复定时器
            setBannerTimer();
        });
        //设置是否在拖拽横幅轮播图，默认不拖拽
        let isBannerSwiperMove = false;
        //设置鼠标开始点击横幅轮播图的X坐标值
        let mouseX = 0;
        //设置拖拽过程中改变的值
        let moveX = 0;
        //鼠标开始点击横幅轮播图
        $('.banner_swiper_wrap').mousedown(function (e) {
            //开始拖拽
            isBannerSwiperMove = true;
            //清除定时器，消除拖拽过程中定时器的影响
            clearInterval(bannerTimer);
            //清除横幅轮播图过渡样式，拖拽流畅
            $('.banner_swiper_wrap').css('transition', 'none');
            //将获取到的X坐标值赋给mouseX
            mouseX = e.pageX;
        });
        //鼠标在横幅轮播图内移动
        $('.banner_swiper_wrap').mousemove(function (e) {
            //如果在拖拽过程中
            if (isBannerSwiperMove) {
                //计算移动的X坐标值距离
                moveX = e.pageX - mouseX;
                //让横幅轮播图跟着鼠标移动
                $('.banner_swiper_wrap').css('margin-left', ` calc(-${(bannerIndex + 1) * 100}vw + ${moveX}px)`);
            }
        });
        //鼠标松开
        $('.banner_swiper_wrap').mouseup(() => {
            //停止拖拽
            isBannerSwiperMove = false;
            //重新开启定时器
            setBannerTimer();
            //恢复横幅轮播图过渡样式
            $('.banner_swiper_wrap').css('transition', 'all .5s');
            //当拖拽距离小于-100
            if (moveX <= -100) {
                //索引值加一
                bannerIndex++;
                bannerIndexChange();
                //当拖拽距离大于100
            } else if (moveX >= 100) {
                //索引值减一
                bannerIndex--;
                bannerIndexChange();
                //否则拖拽距离过小，不进行索引值改变
            } else {
                $('.banner_swiper_wrap').css('margin-left', `-${(bannerIndex + 1) * 100}vw`);
            }
        });
        //改变索引值
        function bannerIndexChange() {
            //设置过渡样式
            $('.banner_swiper_wrap').css('transition', 'all .5s');
            //当索引值减到-1时
            if (bannerIndex === -1) {
                //先将横幅轮播图左距离暂时设为0(样式过渡)
                $('.banner_swiper_wrap').css('margin-left', '0');
                //0.5s延迟之后清除过渡样式，将左距离设为-500
                setTimeout(() => {
                    $('.banner_swiper_wrap').css({ 'transition': 'none', 'margin-left': '-500vw' });
                }, 500);
                //改变索引值
                bannerIndex = 4;
                //改变横幅按钮样式
                bannerButtonChange();
                //当索引值加到5时
            } else if (bannerIndex === 5) {
                //先将横幅轮播图左距离暂时设为-600(样式过渡)
                $('.banner_swiper_wrap').css('margin-left', '-600vw');
                //0.5s延迟之后清除过渡样式，将左距离设为0
                setTimeout(() => {
                    $('.banner_swiper_wrap').css({ 'transition': 'none', 'margin-left': '-100vw' });
                }, 500);
                //改变索引值
                bannerIndex = 0;
                //改变横幅按钮样式
                bannerButtonChange();
            } else {
                $('.banner_swiper_wrap').css('margin-left', `-${(bannerIndex + 1) * 100}vw`);
                //改变横幅按钮样式
                bannerButtonChange();
            }
        }
        //改变横幅按钮样式
        function bannerButtonChange() {
            $('.banner_swiper_button_item_active').removeClass('banner_swiper_button_item_active');
            $(`.banner_swiper_button_item:eq(${bannerIndex})`).addClass('banner_swiper_button_item_active');
        }
        //自执行函数
        (function () {
            setBannerTimer();
        })();
    </script>
</body>

</html>